<template>
	<view class="user-set-userinfo">
		<view class="user-set-userinfo-list">
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>头像</text>
				<view class="uflex-a-j_fsc" @tap="changeimg">
					<image :src="userpic" mode="aspectFill" lazy-load></image>
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>昵称</text>
				<view class="uflex-a-j_fsc">
					<view>昵称</view>
					<input type="text" v-model="username" />
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>性别</text>
				<view class="uflex-a-j_fsc" @tap="changeOne('sex')">
					<view>{{ sex }}</view>
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>生日</text>
				<picker mode="date" :value="birthday" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uflex-a-j_fsc">
						<view class="uni-input">{{birthday}}</view>
						<text class="icon iconfont icon-bianji1"></text>
					</view>
				</picker>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>情感</text>
				<view class="uflex-a-j_fsc" @tap="changeOne('qg')">
					<view>{{ qg }}</view>
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>职业</text>
				<view class="uflex-a-j_fsc" @tap="changeOne('job')">
					<view>{{ job }}</view>
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
			<view class="user-set-userinfo-item uflex-a-j_sbc">
				<text>家乡</text>
				<view class="uflex-a-j_fsc" @tap="showMulLinkageThreePicker">
					<view>{{pickerText}}</view>
					<text class="icon iconfont icon-bianji1"></text>
				</view>
			</view>
		</view>
		<button class="user-set-btn" type="primary" @tap="submit" :loading="loading">完成</button>
		
		<mpvue-city-picker themeColor="#007aff" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	let sexs = ['不限', '男', '女'];
	let jobs = ['IT', '秘密', '老师'];
	let qgs = ['秘密', '未婚', '已婚'];
	import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	data() {
		return {
			loading: false,
			userpic: '../../static/demo/userpic/1.jpg',
			username: '哈哈',
			sex: '不限',
			qg: '秘密',
			job: 'IT',
			pickerText: '北京市-市辖区-东城区',	
			birthday:this.getDate('new'),
			cityPickerValueDefault: [0, 0, 1]
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		// 修改头像
		changeimg() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				success: res => {
					this.userpic = res.tempFilePaths;
				}
			});
		},
		// 单列选择
		changeOne(val) {
			switch (val) {
				case 'sex':
					uni.showActionSheet({
						itemList:sexs,
						success: (res) => {
							this.sex = sexs[res.tapIndex]
						}
					})
					break;
				case 'qg':
					uni.showActionSheet({
						itemList:qgs,
						success: (res) => {
							this.qg = qgs[res.tapIndex]
						}
					})
					break;
				case 'job':
					uni.showActionSheet({
						itemList:jobs,
						success: (res) => {
							this.job = jobs[res.tapIndex]
						}
					})
					break;
			}
		},
		submit() {},
		// 日期选择
		bindDateChange: function(e) {
			this.birthday = e.detail.value
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			} else{
				year = year
			}
			month = month > 9 ? month : '0' + month;;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 三级联动
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show()
		},
		// 选中的事件
		onConfirm(e){
			this.pickerText = e.label
		}
	},
	onBackPress() {
		if(this.$refs.mpvueCityPicker.showPicker){
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		}
	},
	onUnload() {
		if(this.$refs.mpvueCityPicker.showPicker){
			this.$refs.mpvueCityPicker.pickerCancel();
			return true;
		}
	},
	components:{
		mpvueCityPicker
	}
};
</script>

<style scoped lang="scss">
.user-set-userinfo {
	padding: 10upx 20upx 0;
	@import '../../common/css/form.scss';
	> .user-set-userinfo-list {
		width: 100%;
		> .user-set-userinfo-item {
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;
			border-bottom: 1upx solid #f4f4f4;
			> text {
				font-size: 32upx;
				color: #9b9b9b;
				font-weight: bold;
			}
			> view {
				> image {
					width: 80upx;
					height: 80upx;
					border-radius: 100%;
				}
				> text {
					padding-left: 20upx;
					color: #9b9b9b;
					font-size: 40upx;
				}
				> view {
					font-size: 32upx;
					color: #000;
					font-weight: 400;
				}
				> picker{
					> view {
						font-size: 32upx;
						color: #000;
						font-weight: 400;
					}
				}
				> input {
					text-align: right;
				}
			}
		}
	}
}
</style>
